*{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
    text-align: center;
}
table,body>div{
    width: 800px;
    margin: 0 auto;
}
table{
    border-collapse:separate;
    border-spacing: 0;
    text-align: center;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    table-layout: fixed;
}
table,th,td{
 border: 1px solid black;
}

table th:first-child{
    border-top-left-radius: 10px;
}
table th:last-child{
    border-top-right-radius: 10px;
}

th{
    background-image: linear-gradient(to bottom,midnightblue,cornflowerblue);
    color: #EEEEEE;
}

tbody>tr:nth-child(even){
    background-image: linear-gradient(to bottom,darkseagreen,lightgreen);
}

tbody>tr:hover{
    animation: fadeIn ease 0.5s;
    background-image: linear-gradient(to bottom,greenyellow,yellow);
}

select{
    border: 2px solid black;
    width: 60px;
    background-image: linear-gradient(to bottom,mediumseagreen,white,mediumseagreen);
    font-weight: bold;
}
select:hover{
    width: 60px;
    background-image: linear-gradient(to bottom,mediumseagreen,white,white,mediumseagreen);
    font-weight: bold;
}
body>div>a{
    font:normal bold 14px/16px 'Arial Black';
    display: inline-block;
    width: 56px;
    height: 16px;
    border: 2px solid black;
    background-image: linear-gradient(to bottom,mediumseagreen,white,mediumseagreen);
    color: black;
}
body>div>a:hover{
    color: #555555;
}

#nav>a{
    font:normal bold 14px/16px '微软雅黑 Light';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid black;
    background-image: linear-gradient(to bottom,mediumseagreen,white,mediumseagreen);
    color: black;
    margin-left: 4px;
    text-indent: 0px;
    border-radius: 3px;
}

#searchbar{
    height: 100px;
    border: 2px solid black;
    margin: 10px auto 5px auto;
    padding: 10px;
    box-sizing: border-box;
}
h1 {
    text-align: center;
    background: -webkit-linear-gradient(135deg,
    #0eaf6d,
    #ff6ac6 25%,
    #147b96 50%,
    #e6d205 55%,
    #2cc4e0 60%,
    #8b2ce0 80%,
    #ff6384 95%,
    #08dfb4);
    /* 文字颜色填充设置为透明 */
    -webkit-text-fill-color: transparent;
    /* 背景裁剪，即让文字使用背景色 */
    -webkit-background-clip: text;
    /* 背景图放大一下，看着柔和一些 */
    -webkit-background-size: 200% 100%;
    /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
    -webkit-animation: flowCss 12s infinite linear;
}

@-webkit-keyframes flowCss {
    0% {
        /* 移动背景位置 */
        background-position: 0 0;
    }

    100% {
        background-position: -400% 0;
    }
}

@keyframes fadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@keyframes fadeOut{
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}

h1:hover {
    -webkit-animation: flowCss 4s infinite linear;
}
body>div:last-child{
    position: sticky;
    bottom: 0;
    margin-top: 10px;
    background-image: linear-gradient(45deg,green,darkgreen);
}
th{
    position: sticky;
    top: 0;
}
input[type=number]{
    width: 50px;
}
input[type=text]{
    width: 100px;
}
.title{
    margin-right: 8px;
}
strong{
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}
#pageNum,#pages,#delimiter{
    font:normal bold 15px '微软雅黑';
    color: white;
}

td:first-child,th:first-child{width: 150px}
